<script setup lang="ts">
import { ref, onMounted } from 'vue'
import StudyCard from './components/Card.vue' // 组件使用驼峰命名
import { useRouter, useRoute } from 'vue-router'
import { useConst } from './hooks/useConst'

const router = useRouter()
const route = useRoute()

const { _tabs, _cards } = useConst()

//控制卡片遮罩层显示隐藏
const loading = ref<boolean>(false)

// 若后续此处提供了接口，则可以使用此处定义的响应式数据（并且_tabs同样可以作为初始值）。。但目前没有接口（估计也不打算提供），所以此处作为一个没有用处的扩展点
const tabs = ref(_tabs)
const cards = ref(_cards) // 同理

const activeName = ref<string>(_tabs[0].name) // 激活的tab标签
//tabs盒子点击事件
const changeStudyCard = (name: string) => {
  router.push({ path: '/studyPath', query: { tag: name } })
  loading.value = true
  //发请求带tabs的id，获取相关数据
  activeName.value = name
  setTimeout(() => {
    loading.value = false
  }, 500)
}

//页面加载时,判断是否有tag参数
onMounted(() => {
  // 判断路由参数是否存在tag字段，如果存在则将activeName设置为对应的标签，否则默认选择第一个标签
  activeName.value = route.query.tag ? (route.query.tag as string) : _tabs[0].name
  router.push({ path: '/studyPath', query: { tag: activeName.value } })
})

const message = ref([
  { title: '说说 Java 中 HashMap 的原理？' },
  { title: 'MySQL 索引的最左前缀匹配原则是什么？' },
  { title: 'Java 中的序列化和反序列化是什么？' },
  { title: 'Java 中 ConcurrentHashMap 1.7 和 1.8 之间有哪些区别？' },
  { title: 'MySQL 的索引类型有哪些？' },
  { title: '说说 Java 中 HashMap 的原理？' },
  { title: 'MySQL 索引的最左前缀匹配原则是什么？' },
  { title: 'Java 中的序列化和反序列化是什么？' },
  { title: 'Java 中 ConcurrentHashMap 1.7 和 1.8 之间有哪些区别？' },
  { title: 'MySQL 的索引类型有哪些？' },
])
</script>
<template>
  <div class="box">
    <!-- 左边内容 -->
    <div class="tabs">
      <!-- tabs标签栏 -->
      <!-- 用index作为key没有意义 -->
      <div class="tabsBox">
        <div
          class="tab-item"
          :class="{ 'tab-item-active': activeName === item.name }"
          v-for="item in _tabs"
          :key="item.name"
          @click="changeStudyCard(item.name)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="tab-content" v-loading="loading">
        <!-- 卡片组件 -->
        <StudyCard
          v-for="(item, index) in _cards[activeName]"
          :key="index"
          :title="item.title"
          :content="item.content"
          :tags="item.tags"
          :time="item.time"
        />
        <!-- 数据写死就不需要分页了 -->
        <!-- 分页器 -->
        <!-- <el-pagination background layout="prev, pager, next" :total="1" /> -->
      </div>
    </div>
    <!-- 右边内容 -->
    <div>
      <!-- 热门题目榜 -->
      <div class="hot-box">
        <div class="hot-box-title">
          <div class="title">热门题目</div>
          <a href="#">更多</a>
        </div>
        <div>
          <div class="hot-item" v-for="(item, index) in message" :key="index">
            <div class="hot-item-title">{{ item.title }}</div>
            <el-icon>
              <Star />
            </el-icon>
          </div>
        </div>
      </div>
      <!-- 二维码盒子 -->
      <div class="qrcode-box">
        <div>
          <img src="@/assets/avatar.gif" alt="" />
        </div>
        <div class="qrcode-box-title">
          <h2>用户交流</h2>
          <p>一起刷题学习、求职交流、反馈建议、获取更新通知</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  margin: 20px 0;
}

.tabsBox {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 10px;
  min-width: 750px;

  .tab-item {
    box-sizing: border-box;
    padding: 20px 5px;
    cursor: pointer;

    &:hover {
      color: #c8e74d;
      box-shadow: 0 2px 0 0 #c8e74d;
    }
  }
}

.tab-item-active {
  color: #c8e74d;
  box-shadow: 0 2px 0 0 #c8e74d;
}

.hot-box {
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px 20px;
  border-radius: 10px;
  margin-bottom: 20px;

  .hot-box-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-weight: 600;
    }

    a {
      color: #7b14ea;
    }
  }

  .hot-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    box-sizing: border-box;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
      background: #f5f5f5;
    }

    .hot-item-title {
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 300px;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}

.qrcode-box {
  background-color: #fff;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;

  .qrcode-box-title {
    margin-left: 20px;
  }
}
</style>
